// 通用的UI组件

import React from 'react';
import Link from 'next/link';

// 服务器状态指示器
interface ServerStatusProps {
  running: boolean | null;
  onRecheck: () => void;
}

export function ServerStatusIndicator({ running, onRecheck }: ServerStatusProps) {
  return (
    <div>
      <span className="font-medium">服务器状态: </span>
      <span className={`inline-block w-3 h-3 rounded-full mr-2 ${running ? 'bg-green-500' : 'bg-red-500'}`}></span>
      <span className={running ? 'text-green-600' : 'text-red-600'}>
        {running === null ? '检查中...' : running ? '运行中' : '未运行'}
      </span>
      <button
        onClick={onRecheck}
        className="ml-3 text-sm text-blue-600 hover:text-blue-800"
      >
        重新检查
      </button>
    </div>
  );
}

// 统计数据显示组件
interface StatsCardProps {
  value: number | string;
  label: string;
  color?: 'blue' | 'green' | 'yellow' | 'red';
}

export function StatsCard({ value, label, color = 'blue' }: StatsCardProps) {
  const colorClasses = {
    blue: 'text-blue-600',
    green: 'text-green-600',
    yellow: 'text-yellow-600',
    red: 'text-red-600',
  };

  return (
    <div className="text-center">
      <div className={`text-2xl font-bold ${colorClasses[color]}`}>{value}</div>
      <div className="text-sm text-gray-600">{label}</div>
    </div>
  );
}

// 进度条组件
interface ProgressBarProps {
  progress: number;
  label?: string;
  color?: string;
}

export function ProgressBar({ progress, label, color = 'bg-blue-600' }: ProgressBarProps) {
  return (
    <div className="mb-4">
      <div className="bg-gray-200 rounded-full h-2">
        <div 
          className={`${color} h-2 rounded-full transition-all duration-300`}
          style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}
        ></div>
      </div>
      {label && (
        <div className="text-sm text-gray-600 mt-1">
          {label}
        </div>
      )}
    </div>
  );
}

// 状态徽章组件
interface StatusBadgeProps {
  status: 'pending' | 'confirmed' | 'failed';
  showText?: boolean;
}

export function StatusBadge({ status, showText = true }: StatusBadgeProps) {
  const config = {
    pending: { color: 'bg-yellow-500', text: '等待中' },
    confirmed: { color: 'bg-green-500', text: '已确认' },
    failed: { color: 'bg-red-500', text: '失败' },
  };

  const { color, text } = config[status];

  return (
    <span className="inline-flex items-center">
      <span className={`inline-block w-2 h-2 rounded-full mr-1 ${color}`}></span>
      {showText && text}
    </span>
  );
}

// 页面头部组件
interface PageHeaderProps {
  title: string;
  homeUrl?: string;
}

export function PageHeader({ title, homeUrl = '/' }: PageHeaderProps) {
  return (
    <div className="fixed top-6 left-6 z-50 flex items-center bg-white rounded-full shadow border border-gray-200 px-2 h-10">
      <Link
        href={homeUrl}
        className="flex items-center justify-center px-2 h-8 rounded-full hover:bg-gray-100 text-base font-medium"
        aria-label="返回首页"
      >
        <svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" className="mr-1">
          <path d="M15 18l-6-6 6-6" />
        </svg>
        回到主页
      </Link>
      <span className="ml-4 text-2xl font-bold select-none">{title}</span>
    </div>
  );
}

// 卡片容器组件
interface CardProps {
  title: string;
  children: React.ReactNode;
  className?: string;
}

export function Card({ title, children, className = '' }: CardProps) {
  return (
    <div className={`w-full bg-white rounded-lg p-6 border ${className}`}>
      <h2 className="text-xl font-semibold mb-4">{title}</h2>
      {children}
    </div>
  );
}

// 输入组件
interface InputGroupProps {
  label: string;
  value: string | number;
  onChange: (value: string) => void;
  type?: 'text' | 'number';
  placeholder?: string;
  disabled?: boolean;
  min?: number;
  max?: number;
  className?: string;
}

export function InputGroup({ 
  label, 
  value, 
  onChange, 
  type = 'text',
  placeholder,
  disabled = false,
  min,
  max,
  className = ''
}: InputGroupProps) {
  return (
    <div className={`flex items-center gap-4 ${className}`}>
      <label className="font-medium">{label}:</label>
      <input
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        disabled={disabled}
        min={min}
        max={max}
        className="border rounded px-3 py-2 w-32"
      />
    </div>
  );
}

// 按钮组件
interface ButtonProps {
  children: React.ReactNode;
  onClick: () => void;
  disabled?: boolean;
  variant?: 'primary' | 'secondary' | 'success' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  className?: string;
}

export function Button({ 
  children, 
  onClick, 
  disabled = false, 
  variant = 'primary',
  size = 'md',
  className = ''
}: ButtonProps) {
  const baseClasses = 'rounded font-medium transition disabled:opacity-50 disabled:cursor-not-allowed';
  
  const variantClasses = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700 disabled:bg-gray-400',
    secondary: 'bg-gray-600 text-white hover:bg-gray-700',
    success: 'bg-green-600 text-white hover:bg-green-700',
    danger: 'bg-red-600 text-white hover:bg-red-700',
  };
  
  const sizeClasses = {
    sm: 'px-3 py-1 text-sm',
    md: 'px-4 py-2',
    lg: 'px-6 py-3 text-lg',
  };

  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
    >
      {children}
    </button>
  );
}
